<template>
    <div class="tree-root" :style="levelStyle(param.level,true)"
        @click="flodfn(param)"
    >
        <div v-if="isTree(param) " class="data-unflod">
            <div class="unflod-arrow" :class="{'unflod-arrow-unflod': !param.flod}"></div>
        </div>
        <div v-if="param.keyName" class="data-key">{{ param.keyName }}<span class="colon">:</span></div>

        <div v-if="isTree(param) && param.type !== 'Function'" class="data-type">{{ `<${param.type}>` }}</div>

        <div class="data-content">
            <div class="data-content-abstract" :class="[`data-content-abstract-${param.type}`]">{{ setShowValue(param) }}</div>
        </div>
    </div>
    <div v-if="isTree(param)" v-show="!param.flod"
        class="flod-content"
    >
        <div v-if="param.type === 'Function'" :style="levelStyle(param.level)">{{ param.origin }}</div>
        <div v-for="(value,key) in param.source" v-else
            :key="key"
            class="param-row"
        >
            <tree v-if="isTree(value)" :param="value"/>
            <div v-else :style="levelStyle(value.level)">

                <span class="param-key">{{ key }}<span class="colon">:</span></span>
                <span class="param-value" :class="`param-value-${value.type}`">{{ setShowValue(value) }}</span>
            </div>
        </div>

    </div>

</template>

<script>
export default {
    name: 'Tree'
};
</script>
<script setup>
import {defineProps, ref} from 'vue';
import {isTree, setShowValue} from './utils/tree';

const flodfn = param => {
    param.flod = !param.flod;
};
const props = defineProps({
    param: {
        type: Object,
        required: true
    }
});

const {param} = ref(props).value;


const levelStyle = (level, flag) => {
    return {
        'margin-left': `${flag ? (level * 10) - 17 : level * 10}px`
    };
};

</script>

<style lang="scss" scoped>
.tree-root {
    display: flex;
    overflow: hidden; /* 隐藏溢出的内容 */
    flex: 1;
    flex-wrap: nowrap;
}

.data-unflod {
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
    width: 15px;

    .unflod-arrow {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 0 5px 10px;
        border-color: transparent transparent transparent #474747;
        transition: all .3s ease;

        &-unflod {
            transform: rotate(90deg) translateX(2px);
        }
    }
}

.data-key {
    margin-left: 5px;
    font-weight: 800;
    color: #a0004b;
}

.data-type {
    padding: 0 2px;
    width: fit-content;
    text-align: center;
    cursor: default;
}

.data-content {
    width: 100%;

    &-abstract {
        overflow: hidden; /* 隐藏溢出的内容 */
        // max-width: 400px;
        width:fit-content;
        margin-right:10px;
        text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
        white-space: nowrap; /* 确保文本在一行内显示 */
        color: #000;
        cursor: default;

        &:hover {
            background: #f2f2f2;
        }

        &-Function {
            margin-left: 5px;
            color: black;
            font-style: italic;
        }
    }
}

.param-key {
    font-weight: 800;
    color: #a0004b;
}

.param-value {
    margin-left: 5px;
    color: black;

    &-Number {
        color: #0842a0;
    }

    &-String {
        color: #dc362e;
    }

    &-Boolean {
        color: #0842a0;
    }

    &-Null {
        color: #aaa;
    }

    &-Undefined {
        color: #aaa;
    }

    &-Function {
        // font-style: italic;
        color: black;
    }
}

.colon {
    font-weight: 500;
    color: black;
}
</style>
